<template>
    <main class="daily-supply-price">
      <homepage-nav :active-index="2"></homepage-nav>
      <section class="categories">
        <div v-for="(item, index) in categories" :key="index"
             class="category" :class="{active:index===activeIndex}">
          <span class="category-name">{{item.name}}</span>
        </div>
      </section>
      <section class="statistic-line">
        <div class="left-part">
          <div v-for="(item,index) in rows" :key="index"
               class="left-row">
            <div class="ask-cell">
              <div class="ask-title">青果日均购货价</div>
              <div class="ask-field">
                <span class="ask-value">{{item.price}}</span>
                <span class="ask-unit">元/kg</span>
              </div>
            </div>
            <div class="ask-cell">
              <div class="ask-title">青果求购数</div>
              <div class="ask-field">
                <span class="ask-value">{{item.count}}</span>
                <span class="ask-unit">次</span>
              </div>
            </div>
          </div>
        </div>
        <div class="mid-part">
          <div class="mid-header">
            <div class="mid-title">干籽指数</div>
            <div class="mid-legend"><span class="legend-icon"></span>吨</div>
          </div>
          <img src="../../assets/front/img/map_example.png">
        </div>
        <div class="right-part ">
          <div class="right-list">
            <div v-for="(item,index) in 6" :key="index"
                 class="info-box"></div>
          </div>
          <div class="right-buttons">
            <div class="right-button">免费发求购</div>
            <div class="right-button">进入卖家中心</div>
          </div>
        </div>
      </section>
      <section class="blank-line"></section>
      <section class="table-line"></section>
    </main>
</template>

<script>
import HomepageNav from './homepage/HomepageNav';

export default {
    components: {
        HomepageNav
    },
    data() {
        return {
            activeIndex: 0,
            categories: [
                {
                    name: '全部'
                },
                {
                    name: '干籽'
                },
                {
                    name: '青果'
                },
                {
                    name: '小粒籽'
                },
                {
                    name: '大粒籽'
                },
                {
                    name: '寒露籽'
                },
                {
                    name: '霜降籽'
                }
            ],
            rows: [
                {
                    price: 18,
                    count: 1000
                },
                {
                    price: 18,
                    count: 1000
                },
                {
                    price: 18,
                    count: 1000
                },
                {
                    price: 18,
                    count: 1000
                }
            ]
        };
    },
    methods: {}
};
</script>
<style lang="scss">
  @import "../../assets/front/front";

  .daily-supply-price {
    width: $page-width;
    .categories {
      height:40px;
      @include flex-align-center;
      border-top: 2px solid $bg-color;
      .category {
        height:40px;
        line-height: 40px;
        font-size: 16px;
        color: $font-dark-color;
        cursor: pointer;
        &.active {
          color: $main-color;
          border-bottom: 2px solid $main-color;
        }
        .category-name {
          border-right: $border;
          padding:0 12px;
        }
      }
    }
    .statistic-line  {
      height:310px;
      display: flex;
      justify-content: space-between;
      .left-part{
        padding:0 38px;
        width:325px;background-color: #f0f0f0;
        border: solid 1px #e6e6e6;
        .left-row {
          height:77px;
          @include flex-align-center;
          justify-content: space-between;
          border-bottom: $border;
          .ask-cell{
            .ask-title{
              color: #646464;
            }
            .ask-field{
              margin-top:10px;
              text-align: center;
            }
            .ask-value {
              font-size: 26px;
              color: $main-color;
            }
            .ask-unit {
              font-size: 10px;
              color: #646464;
            }
          }
        }
      }
      .mid-part {
        width: 455px;
        border: solid 1px #e6e6e6;
        .mid-header {
          padding: 0 15px;
          height: 50px;
          @include flex-center;
          justify-content: space-between;
          font-size: 14px;
          color: #8b8b8b;
          .legend-icon {
            width: 10px;
            height: 10px;
            margin-right:5px;
            display: inline-block;
            border-radius: 50%;
            background: #58c388;
          }
        }
      }
      .right-part {
        width:415px;
        background-color: #f0f0f0;
        .right-list {
          margin-top:14px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
        }
        .info-box {
          position: relative;
          margin:5px;
          width:170px;
          height:60px;
          border:$border;
          background-color: #fff;
          &:after {
            content:'';
            position: absolute;
            top:11px;
            right:-4px;
            height:20px;
            width:37.5px;
            background: url("../../assets/front/img/book_label.png");
            background-size: 100%;
          }
        }
        .right-buttons {
          margin-top:10px;
          @include flex-center;
          .right-button {
            margin:5px;
            width:115px;
            height:31px;
            @include flex-center;
            background: $main-color;
            color: #fff;
            border-radius: 16px;
          }
        }
      }
    }
    .blank-line {
      margin-top:20px;
      height: 86px;
      background-color: #f0f0f0;
      border: solid 0 #e6e6e6;
    }
  }
</style>
